<template>
	<view class="guide flex-column">
		<swiper class="swiper" :current="current" @change="change">
			<swiper-item class="guide-1  flex-column jc-center ai-center bgSize" v-for="(item,index) in guide">
				<m-image  :size="[640,640]" :src="item.topImg" mode="" />
				<view class="dl flex-column ai-center mt-100">
					<text class="dt block text-whilt">
						<text class="text-primary" style="font-size: 50rpx;">{{item.text_01}}</text>
					</text>
					<view class="flex mt-24">
						<text v-for="item2 in item.text_02" class="dd block fs34 plr-8" style="color: #999999;">{{item2}}</text>
					</view>
				</view>
			</swiper-item>

		</swiper>
		<view class="circular flex-center pa-bottom" >
			<view class="dian flex" v-if="current<guide.length-1">
				<text :class="{'active':current == 0}"></text>
				<text :class="{'active':current == 1}"></text>
				<text :class="{'active':current == 2}"></text>
			</view>
			<view class="" v-else>
				<m-button @click='goHome'>立即进入</m-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth'
	export default {
		name: "m-guide",
		data() {
			return {
				current: 0,
				guide: [{
						topImg: require('../../static/images/pages/guide/guide1.png'),
						text_01: '互联网+AI+餐饮',
						text_02: ['科技引领行业，创新改变市场'],
					},
					{
						topImg: require('../../static/images/pages/guide/guide2.png'),
						text_01: '万亿打印市场，无限商机共享',
						text_02: ['民生刚需，市场广阔，全托管运营，按月分红'],

					},
					{
						topImg: require('../../static/images/pages/guide/guide3.png'),
						text_01: '出门只带手机，随时随地打印',
						text_02: ['无需排队，自助打印,24h服务'],
					}
				]
			};
		},
		mounted() {},
		methods: {
			getImageUrl(index) {
				  return require(`../../static/images/pages/guide/guide0${index+1}.jpg`);
			    },
			async goHome() {
				const a = await this.getAppVersion()
				uni.setStorageSync('guide', {
					version: a
				})
				this.Jump({
					url: '/pages/home/home',
					mode: 3
				})
			},
			change({ detail: { current } }) {
				this.current = current;
			},
			getAppVersion() {
				// #ifdef APP-PLUS
				return new Promise((resolve, reject) => {
					try {
						plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
							let version = wgtinfo.version;
							resolve(version);
						});
					} catch (e) {
						console.log(e)
						reject("1.0.0");
					}
				});
				// #endif
				return '1.0.0'

			}
		},
	}
</script>

<style lang="scss">
	.guide {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		// background: url('../../static/images/pages/guide/guide-bg.png') no-repeat;
		background-size: 100% auto;

		.circular {
			padding: 25rpx 0 80rpx;
			color: #fff;
			height: 100rpx;

			.dian {
				text {
					margin: 0px 10rpx;
					display: inline-block;
					width: 100rpx;
					height: 6rpx;
					background: #e7e4dd;
					border-radius: 20rpx;
				}

				.active {
					background: var(--theme);
				}

				text+text {
					margin-left: 14rpx;
				}
			}

			.m-button {
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				padding: 20rpx 100rpx;
			}
		}
	}

	.swiper {
		flex: 1;
	}
	.pa-bottom{
		position: absolute;
		width: 100%; 
		bottom: 0px;
	}
	.bgSize{
		background-size: 100% 100%;
		background-position: 0px 0px;
		background-repeat: no-repeat;
		background-color: #FFFFFF;
	}
</style>